import { motion, useInView } from 'framer-motion';
import { useRef, useState } from 'react';

const Experience = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  const [expandedIndex, setExpandedIndex] = useState(0);
  
  // Work experience data
  const experiences = [
    {
      company: '字节跳动',
      position: '前端开发工程师',
      period: '2022.07 - 至今',
      logo: 'BJ',
      responsibilities: [
        '负责公司内部数据可视化平台的前端开发与维护，使用React和ECharts。',
        '通过代码重构和性能优化，将关键页面的加载速度提升了30%。',
        '与产品经理和设计师紧密合作，快速迭代了超过10个版本的功能。'
      ]
    },
    {
      company: '腾讯科技',
      position: '前端开发实习生',
      period: '2021.07 - 2021.12',
      logo: 'TX',
      responsibilities: [
        '协助开发微信小程序"城市服务"模块，主要负责UI组件的编写和API对接。',
        '参与了代码审查（Code Review），学习并遵循了团队的编码规范。'
      ]
    }
  ];
  
  // Toggle expand/collapse for experience items
  const toggleExpand = (index: number) => {
    setExpandedIndex(expandedIndex === index ? -1 : index);
  };
  
  return (
    <motion.section
      id="experience"
      ref={ref}
      initial={{ opacity: 0, x: 50 }}
      animate={isInView ? { opacity: 1, x: 0 } : {}}
      transition={{ duration: 0.8, ease: "easeOut", delay: 0.1 }}
      className="bg-color-card rounded-xl p-6 shadow-lg backdrop-blur-sm border border-gray-800"
    >
      <div className="flex items-center mb-6">
        <div className="w-10 h-10 rounded-full bg-color-accent flex items-center justify-center mr-4 star-glow">
          <i className="fa-solid fa-briefcase text-white"></i>
        </div>
        <h2 className="text-2xl font-bold text-gray-100">工作经历</h2>
      </div>
      
      <div className="border-t border-gray-700 pt-6 space-y-8">
        {experiences.map((exp, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: index * 0.2 }}
            className="relative pl-8 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-gray-700"
          >
            {/* Company Logo */}
            <div className="absolute left-[-24px] top-1 w-12 h-12 rounded-full bg-color-accent flex items-center justify-center text-white font-bold star-glow">
              {exp.logo}
            </div>
            
            {/* Company Info */}
            <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-2 cursor-pointer" onClick={() => toggleExpand(index)}>
              <div>
                <h3 className="text-xl font-semibold text-gray-100">{exp.company}</h3>
                <p className="text-gray-300">{exp.position}</p>
              </div>
              <div className="flex items-center mt-1 md:mt-0">
                <span className="text-gray-400 mr-3">{exp.period}</span>
                <motion.i 
                  className={`fa-solid ${expandedIndex === index ? 'fa-chevron-up' : 'fa-chevron-down'} text-gray-400 transition-transform`}
                  animate={expandedIndex === index ? { rotate: 180 } : { rotate: 0 }}
                />
              </div>
            </div>
            
            {/* Responsibilities */}
            <motion.ul
              initial={{ height: 0, opacity: 0 }}
              animate={{ 
                height: expandedIndex === index ? 'auto' : 0,
                opacity: expandedIndex === index ? 1 : 0
              }}
              transition={{ duration: 0.3, ease: "easeInOut" }}
              className="text-gray-300 overflow-hidden mt-2 space-y-2 pl-5"
            >
              {exp.responsibilities.map((resp, i) => (
                <li key={i} className="relative before:absolute before:left-[-20px] before:top-1 before:w-5 before:h-5 before:rounded-full before:bg-gray-700 before:flex before:items-center before:justify-center">
                  <i className="fa-solid fa-check text-xs text-gray-400"></i>
                  {resp}
                </li>
              ))}
            </motion.ul>
          </motion.div>
        ))}
      </div>
    </motion.section>
  );
};

export default Experience;